import React, { Component } from 'react';
import {
  StyleSheet, View, TouchableOpacity, Image,
} from 'react-native';
import PropTypes from 'prop-types';

class Collapse extends Component {
  static propTypes = {
    isSpread: PropTypes.bool, // 是否默认展开
    renderTitle: PropTypes.func,
    // renderSubTitle: PropTypes.func,
    renderContent: PropTypes.func,
    // onTitleClicked: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      isContentShow: this.props.isSpread || false,
    };
  }

  // onTitleClicked() {
  // console.log('onTitleClicked e:',e);
  // this.setState({ isContentShow: !this.state.isContentShow });
  // this.props.onTitleClicked();
  // }

  render() {
    let contentView = null;
    if (this.state.isContentShow) {
      contentView = this.props.renderContent();
    }
    return (
      <View>
        <TouchableOpacity onPress={() => this.setState((prevState) => ({ isContentShow: !prevState.isContentShow }))}>
          <View style={styles.clickTitle}>
            <View style={styles.titieContact}>{this.props.renderTitle()}</View>
            <Image
              style={[styles.arrow, { transform: this.state.isContentShow ? [] : [{ rotate: '180deg' }] }]}
              source={require('../images/utils/dropdown_arrow.png')}
            />
          </View>
          {/* this.props.renderSubTitle() */}
        </TouchableOpacity>
        {contentView}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  clickTitle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  titieContact: {
    flex: 1,
  },
  arrow: {
    marginLeft: 3,
    marginRight: 2,
    width: 25,
    height: 25,
  },
});
export default Collapse;
